<!--消息列表-->
<script>
import { clearMessageNotRead, selectMessageList } from '@/api/chat/messageList'
import CustomCard from '@/components/Chats/CustomCard.vue'
import SocketUtil from '@/utils/SocketUtil'

export default {
  name: '',
  components: { CustomCard },
  data() {
    return {
      messageList: [],
      messageListLoading: false

    }
  },
  methods: {
    connect() {
      this.socket = SocketUtil.connect(`/websocket/messageList`, (data) => {
        console.log('Received data:', data)
        // this.mySendMessageList.push(data)
      })
    },

    toFindUser() {
      this.$router.push('/chat/findUser')
    },
    /**
     * 跳转到聊天页面
     * @param friendId 好友id
     */
    toChatView(friendId) {
      console.log(`friend user id::: ${friendId}`)

      let param = { friendId }
      //消除这个好友的全部未读消息
      clearMessageNotRead(param).then(({ data }) => {
        console.log(`消除全部未读消息数量: ${data}`)
      })

      this.$router.push(`/chatting/${friendId}`)
    },

    getMessageList() {
      selectMessageList().then(({ data }) => {
        this.messageList = data
      })
    }

  },

  created() {
    this.getMessageList()
    //todo 暂时先不做实时推送 this.connect()
  },

  mounted() {
    this.$store.dispatch('app/toggleSideBarHide', true)
    this.$nextTick(() => {
      if (document.querySelector('.navbar')) {
        document.querySelector('.navbar').style.display = 'none'
      }
      if (document.querySelector('.tags-view-container')) {
        document.querySelector('.tags-view-container').style.display = 'none'
      }
    })
  },
  beforeDestroy() {
    SocketUtil.disconnect(this.socket)
  }

}
</script>

<template>
  <div>

    <el-row>
      <el-col :span="24">

        <van-sticky :offset-top="10">
          <!--        搜索-->
          <van-search
            @click="toFindUser"
            show-action
            placeholder="搜索"
          />
        </van-sticky>

        <div class="grid-content bg-purple">
          <el-row>
            <!--左侧聊天列表-->
            <el-col :span="24">

              <div class="chatList">
                <!--  遍历这个 card-->

                <el-card @click.native="toChatView(item.userId)" v-for="item in messageList" :key="item.nickName"
                         :body-style="{ padding: '0px' }"
                >
                  <custom-card
                    :not-read-num="item.notReadNum"
                    :desc="item.message"
                    :title="item.nickName"
                    :thumb="item.avatar"
                    :centered="true"
                  ></custom-card>
                </el-card>
              </div>

            </el-col>

          </el-row>


        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style>
.chatList {
  //margin-top: 10px;
}

.van-card__title {
  font-weight: bold;
  font-size: 20px;
  min-height: 22px;
  line-height: 22px;
}

.van-card {
  height: 85px;
}


.van-card__thumb {
  width: 80px;
  height: 80px;
}

.findUser {
  position: fixed; /* 将 .findUser 固定到顶部 */
  top: 0; /* 确保 .findUser 在顶部 */
  width: 100%; /* 让 .findUser 占据全宽 */
  z-index: 1000; /* 设置一个较大的 z-index 值，确保 .findUser 在 .grid-content bg-purple 上方 */
  height: 40px; /* 设置一个高度，以便有足够的空间显示外边距 */
  padding: 10px 0;
}

.input-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80% /* 输入框宽度 */;
  margin: 0 10px; /* 如果需要左右外边距，可以在这里设置 */
}

.headImg {
  width: 70px;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nickName {
  line-height: 50px;
  font-weight: 800;

}

.messagePre {
  color: #999;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  //background: #99a9bf;
}

.bg-purple {
  //background: #d3dce6;
}

.bg-purple-light {
  //background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content.bg-purple {
  margin-top: 50px; /* 添加一个与 .findUser 高度相同的上边距，以防止 .grid-content bg-purple 被 .findUser 遮挡 */
  overflow-y: auto; /* 允许 .grid-content bg-purple 上下滚动 */
  height: calc(100vh - 95px); /* 设置 .grid-content bg-purple 的高度为视口高度减去 .findUser 的高度，以确保 .grid-content bg-purple 不会超出视口 */
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
